<template>
	<div class="mydata">
		<HeaderTop :title="`个人资料`"></HeaderTop>
		<div class="my-data">
			<div class="my-data-top">
				<div class="my-data-list">
					<div class="my-data-list-left">头像</div>
					<div class="my-data-list-right">
						<div class="my-data-list-right-left"><img class="userAvatar" :src="avatarUrl" alt=""></div>
					</div>
				</div>
				<div class="my-data-list">
					<div class="my-data-list-left">代理账户名</div>
					<div class="my-data-list-right">
						<div class="my-data-list-right-left" v-html="loginName"></div>
					</div>
				</div>
				<div class="my-data-list">
					<div class="my-data-list-left">账号</div>
					<div class="my-data-list-right">
						<div class="my-data-list-right-left" v-html="realName"></div>
					</div>
				</div>
				<div class="my-data-list">
					<div class="my-data-list-left">账户余额</div>
					<div class="my-data-list-right">
						<div class="my-data-list-right-left" v-html="balance"></div>
					</div>
				</div>
				<div class="my-data-list">
					<div class="my-data-list-left">注册时间</div>
					<div class="my-data-list-right">
						<div class="my-data-list-right-left" v-html="createTime"></div>
					</div>
				</div>
				<div class="my-data-list">
					<div class="my-data-list-left">虚拟币类型</div>
					<div class="my-data-list-right">
						<div class="my-data-list-right-left" v-html="virtualCoinType"></div>
					</div>
				</div>
				<div class="my-data-list">
					<div class="my-data-list-left">虚拟币账号</div>
					<div class="my-data-list-right">
						<div class="my-data-list-right-left" v-html="virtualCoinAccount"></div>
					</div>
				</div>
				<div class="my-data-list">
					<div class="my-data-list-left">手机号码</div>
					<div class="my-data-list-right">
						<div class="my-data-list-right-left" v-html="phone"></div>
					</div>
				</div>
				<div class="my-data-list">
					<div class="my-data-list-left">QQ</div>
					<div class="my-data-list-right">
						<div class="my-data-list-right-left" @click="editQq">{{qq}}</div>
						<img src="../../../static/images/agent-lowerLevel-arrow.png" alt="" style="height: .25rem">
					</div>
				</div>
			</div>
			<van-popup v-model="qqEdit" class="detail-popup">
				<div class="detail-popup-title">绑定QQ号码</div>
				<div class="detail-popup-content">
<!--					<div class="detail-popup-content-title"></div>-->
					<van-field class="qq-input" v-model="qqNum" type="digit" maxlength="16"  placeholder="请输入您的QQ号码"/>
				</div>
				<div class="detail-popup-btn" @click="saveQqEdit">确定</div>
			</van-popup>
		</div>
	
	</div>
</template>
<script>
import HeaderTop from '../../components/top/top';
import MuSubmit from '../../components/submit/muSubmit';
import {Toast} from 'vant'
import $ from 'jquery'

export default {
	name: 'myData',
	components: {
		HeaderTop,
		MuSubmit,
		Toast
	},
	data() {
		return {
			avatarUrl: require('../../../static/images/agent-avatar-demo.png'),
			realName: '',
			balance:'',
			virtualCoinType:'',
			createTime: "",
			loginName: "",
			virtualCoinAccount: "暂未设置,请进入安全中心设置",
			phone: "",
			qq: "",
			avatarList: [],
			qqEdit: false,
			qqNum: '',
		}
	},
	mounted() {
		this.loadTop()
	},
	beforeRouteLeave(to, from, next) {    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
		this.$destroy(true)
		next()
	},
	methods: {
		loadTop() {
			this.ServerAPI.postAPI(this.API.userInfo, '', this.userInfo)
		},
		userInfo(success, data) {
			if (success) {
				if (data.code == '0000') {
					this.loginName = data.data.loginName;
					this.balance = data.data.money
					this.qq = data.data.qq
					if (this.qq.length === 0) {
						this.qq = "请绑定QQ号码"
					}
					this.phone = data.data.phone
					this.createTime = data.data.createTime
					this.realName = data.data.realName
					this.virtualCoinType = data.data.virtualType
					this.virtualCoinAccount = data.data.virtualCard
				}
			}
		},
		editQq(){
			this.qqEdit = true
		},
		saveQqEdit(){
			let params = {
				qq: this.qqNum
			}
			this.ServerAPI.postAPI(this.API.subInfo, params, (success,data)=>{
				if(success){
					if(data.code === '0000'){
						this.qqEdit = false
						Toast.success('绑定成功')
						this.loadTop()
					}else{
						Toast.fail(data.info)
					}
				}else{
					Toast.fail(data.info)
				}
			})
	
		},
	}
}
</script>
<style lang="scss" scoped>
.my-data {
	width: 100%;
	padding: 0 .2rem;
	height: 100%;
	font-size: .26rem;
	.or-btn {
		width: 60%;
		margin: .3rem auto 0;
	}
	.my-data-top {
		margin-bottom: .3rem;
		border-radius: .07rem;
	}
	
	.my-data-list {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1rem;
		border-bottom: 1px solid #ececec;
		padding: 0 .2rem;
		
		.my-data-list-left {
			color: rgb(46,46,46);
			font-size: .28rem;
		}
		
		.my-data-list-right {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.my-data-list-right-left {
				flex: .6rem;
				color: #191D2A;
				margin-right: .2rem;
				
				img {
					width: .8rem;
					height: .8rem;
				}
				
				.adress-line1 {
					width: 3.5rem;
					height: 50%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.adress-current {
						width: .6rem;
						height: .35rem;
						text-align: center;
						line-height: .35rem;
						font-size: .24rem;
						color: #FFFFFF;
						background: #D6353F;
						border-radius: .05rem;
					}
				}
			}
			.my-data-list-right-right {
				img {
					height: .2rem;
				}
			}
		}
	}
	.detail-popup {
		border-radius: .1rem;
		width: 5rem;
		.detail-popup-title {
			height: 1rem;
			background: #022595;
			color: #FFFFFF;
			line-height: 1rem;
			text-align: center;
			font-size: .32rem;
		}
		.detail-popup-content {
			padding: .3rem .2rem;
			width: 70%;
			margin: 0 auto;
			.qq-input {
				border-bottom: rgb(191,191,191) 1px solid;
			}
		}
		.detail-popup-btn {
			height: .8rem;
			border-top: rgb(191,191,191) 1px solid;
			color: rgb(47,47,48);
			line-height: .8rem;
			text-align: center;
			font-weight: bold;
			font-size: .3rem;
		}
	}
}
</style>
